<template>
	<view>
		<nav-bar :home='false' ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
		 title="">
			<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview"></view>
		</nav-bar>
		<view style="height: 375rpx;" class="loginImg">
			<view class="login_title">登录</view>
			<view class="title_top">
				<view :class="{'islogin':clo}" @click="clo = true;captcha=false">密码登录</view>
				<view :class="{'islogin':captcha}" @click="clo = false;captcha=true">验证码登录</view>
			</view>
		</view>
		<view class="login_body">

			<u-input class="iptas" :border="true" v-model="phone" :type="type" placeholder="请输入手机号" />
			<u-input v-if="clo" :border="true" class="iptas" v-model="password" placeholder="请输入密码" type="password" />
			<view>
				<view v-if="captcha" class="codeinput">
					<u-input :border="true" class="iptas" v-model="captchaCode" type="password" placeholder="请输入验证码" />
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
						<text @tap="getCode" style="color: #05B2B5;">{{tips}}</text>
					</view>
				</view>
			</view>
			<view class="btnLogin" @click="btnLogin">
				登录
			</view>
			<view class="to_register" @click="btnRegister">
				去注册
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				clo: true,
				captcha: false,
				password: '',
				phone: '',
				captchaCode: '',
				scrollTop: 0,
				tips: '',
				// refCode: null,
				seconds: 60,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!this.phone){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error'
					});
					return;
				}
				let data = {
					phone: this.phone
				};
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.api.getcaptcha(data).then(res => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			btnRegister() {
				uni.navigateTo({
					url: './register'
				})
			},
			// 登录
			btnLogin() {
				if(!this.phone){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error'
					});
					return;
				}
				if (this.clo) {
					let data = {
						'password': this.password,
						'phone': this.phone
					};
					if(!this.password){
						this.$refs.uToast.show({
							title: '请输入密码',
							type: 'error'
						});
						return;
					}
					this.$u.api.getloginPas(data).then(res => {
						if (res.code === '200') {
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success'
							});
							uni.setStorage({
								key: 'token',
								data: res.data.token
							})
							uni.setStorage({
								key: '_PHONE_',
								data: res.data.phone
							})
							setTimeout(() => {
								uni.switchTab({
									url: '../index/index'
								})
							}, 800)
							return;
						}
						if (res.code === '201') {
							this.$refs.uToast.show({
								title: '用户不存在',
								type: 'error'
							});
							return;
						}
						if (res.code === '202') {
							this.$refs.uToast.show({
								title: '用户密码错误',
								type: 'error'
							});
							return;
						}
						if (res.code === '400') {
							this.$refs.uToast.show({
								title: '用户被禁用',
								type: 'error'
							});
							return;
						}
					});

				}
				if (this.captcha) {
					let data = {
						'phone': this.phone,
						'validation': this.captchaCode
					};
					if(!this.captchaCode){
						this.$refs.uToast.show({
							title: '请输入验证码',
							type: 'error'
						});
						return;
					}
					this.$u.api.getcaptchaLogin(data).then(res => {
						if (res.code === '200') {
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success'
							});
							uni.setStorage({
								key: 'token',
								data: res.data.token
							})
							uni.setStorage({
								key: '_PHONE_',
								data: res.data.phone
							})
							setTimeout(() => {
								uni.switchTab({
									url: '../index/index'
								})
							}, 800);
						}
						if (res.code === '201') {
							this.$refs.uToast.show({
								title: '验证码错误',
								type: 'error'
							});
							return;
						}
						if (res.code === '400') {
							this.$refs.uToast.show({
								title: '用户被禁用',
								type: 'error'
							});
							return;
						}
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.login_body {
		position: absolute;
		background: #fff;
		top: 350rpx;
		width: 100%;
		margin: 0 auto;
		border-radius: 40rpx;
		padding-top: 50rpx;
	}

	.title_top {
		display: flex;
		font-size: 28rpx;
		position: fixed;
		margin-left: 60rpx;
		top: 256rpx;

		>view {
			padding: 20rpx 0;
			padding-right: 20rpx;
			width: 150rpx;
			// width: 200rpx;
			flex: 1;
			display: inline-block;
		}
	}

	.islogin {
		color: #fff;
	}

	.iptas {
		padding: 30rpx 20rpx;
		margin: 0 auto;
		width: 70%;
		border-bottom: 1rpx solid #eee;
		margin-top: 40rpx;
	}

	.btnLogin {
		width: 70%;
		background: #05B2B5;
		text-align: center;
		padding: 20rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 110rpx;
		left: 50%;
		transform: translate(-50%, -100%);
	}

	.codeinput {
		position: relative;
	}

	.wrap {
		text-align: right;
		font-size: 24rpx;
		margin-right: 90rpx;
		margin-top: 20rpx;
	}

	.to_register {
		font-size: 30rpx;
		text-align: center;
		position: fixed;
		bottom: 100rpx;
		color: #05B2B5;
		left: 50%;
		transform: translate(-50%, -100%);
	}

	.loginImg {
		background-image: url(../../static/img/login_top.png);
		background-size: 100% 100%;
	}

	.login_title {
		position: fixed;
		top: 150rpx;
		left: 60rpx;
		font-size: 48rpx;
		color: #fff;
	}
</style>
